<template>
	<div class="newAblum">
		<div class="ablum" v-for="item in album" :key="item.id">
			<div class="ablum_box">
				<img :src="item.blurPicUrl" alt="" />
			</div>
			<p>{{item.company}}</p>
			<span>{{item.type}}</span>
			
			
		</div>
	</div>
</template>

<script>
	export default {
		name: "playlist",

		data() {
			return {
				album: []
			}
		},
		methods: {
			getTopAlbum() {
				this.$http.get("/top/album", {
					params: {
						limit: 3
					}
				}).then(res => {
					console.log(res)
					this.album = res.data.albums
				})

			}
		},
		created() {
			this.getTopAlbum();
		}

	}
</script>

<style lang="scss" scoped>
	@import "~@/assets/css/common.scss";
	.newAblum {
		display: flex;
		justify-content: space-around;
		padding: 0 vw(16);
		margin:vw(10) 0 0;
		position: relative;
		.ablum {
			width: 32%;
			text-align: center;
		
			.ablum_box {
				width: 100%;
				height: vw(110);
				border-radius: vw(5);
				overflow: hidden;
				img {
					width: 100%;
				}
			}
			p {
				font-size: vw(14);
				color: #333;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}
			span {
				font-size: vw(12);
				color: #999;
			}
			
		}
		h3{
				font-size: vw(10);
				border: 1px solid #ddd;
				border-radius: vw(10);
				padding: vw(4) vw(6);
				position: absolute;
				top:-32px;
				right: 16px;
				color: #666;
				font-weight: 400;
			}
	}
</style>